<template>
	<view class="buy-vip">
		<view class="buy-vip-list">
			<view :class="['buy-vip-item',active.id == item.id?'buy-vip-item-active':'']" v-for="(item,i) in vipList" :key="i" @click="active = item">
				<view class="buy-vip-text1">{{item.title}}</view>
				<view class="buy-vip-text2">{{item.price}}元/人</view>
				<view class="buy-vip-text1">{{item.desc}}</view>
			</view>
		</view>
		<view :class="['buy-btn',active?'buy-btn-active':'']" @click="payment">
			立即支付
		</view>
	</view>
</template>

<script>
	import api from 'utils/api.js'
	export default {
		data() {
			return {
				vipList: [],
				active: ''
			}
		},
		onLoad() {
			this.http({
				url: `${api.ServerUrlW}api/v1/goods/list`,
				method: 'GET',
				success: res => {
					if(res.code == 0) {
						this.vipList = res.result;
					}
				},
			})
		},
		methods: {
			goto(name, item) {
				uni.navigateTo({
					url: name+"?school_code="+item.code
				});
			},
			payment() {
				let _this = this;
				this.http({
					url: `${api.ServerUrlW}api/v1/order/createOrder`,
					method: 'POST',
					data: {
						userId: uni.getStorageSync('userId'),
						goodsId: this.active.id
					},
					success: res => {
						if (res.code == 0) {
							wx.requestPayment({
								'timeStamp': res.result.timeStamp,
								'nonceStr': res.result.nonce_str,
								'package': 'prepay_id=' + res.result.prepay_id,
								'signType': 'MD5',
								'paySign': res.result.paySign,
								'success': function(res) {
									uni.showToast({
										title: '支付成功',
										icon: 'none',
										duration: 2000
									});
								},
								'fail': function(res) {
									if (res.errMsg.indexOf('cancel') > -1) {
										uni.showToast({
											title: '取消支付',
											icon: 'none',
											duration: 2000
										});
									} else {
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										});
									}
							
								},
								'complete': function(res) {
									console.log(res)
								}
							})
						}
					},
					fail: res => {
						uni.showToast({
							title: 'res'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.buy-vip-list {
		padding: 20rpx;
		overflow: hidden;
		.buy-vip-item {
			float: left;
			width: calc(50% - 12rpx);
			padding: 20rpx;
			background-color: #FFFFFF;
			text-align: center;
			margin-bottom: 20rpx;
			border: 1px solid transparent;
			border-radius: 8px;
			.buy-vip-text1 {
				height: 80rpx;
				font-size: 28rpx;
			}
			.buy-vip-text2 {
				font-size: 36rpx;
				margin: 20rpx 0;
			}
		}
		.buy-vip-item:nth-child(even) {
			margin-left: 20rpx;
		}
		.buy-vip-item-active {
			box-shadow: 0px 0px 7px #45b688;
			border: 1px solid #abf7d8;
		}
	}
	.buy-btn {
		line-height: 80rpx;
		background-color: #89dab9;
		color: #FFFFFF;
		border-radius: 50px;
		width: 80%;
		text-align: center;
		margin-left: 10%;
		position: fixed;
		bottom: 40rpx;
	}
	.buy-btn-active {
		background-color: #45b688;
	}
	.buy-btn:active {
		opacity: .6;
	}
</style>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
